<template>
  <div class="app-container">
    <el-card shadow="never" v-loading="loading">
      <el-row :gutter="5">
        <el-col :span="24" class="main-card-view">
          <el-row>
            <el-card shadow="never" class="top-search-view-card">
              <el-row>
                <el-form :inline="true" :model="searchForm" class="demo-form-inline search-view">
                  <el-form-item label="关键字">
                    <el-input v-model="searchForm.keyWord" placeholder="关键字"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleSearch" class="search-button">查询</el-button>
                    <el-button @click="batchApproval">批量审批</el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </el-card>
          </el-row>

          <el-row>
            <el-card shadow="never">
              <el-table :data="tableData" :stripe="true" style="width: 100%" @selection-change="selectionChange">
                <el-table-column type="selection" align="center" label="序号" />
                <el-table-column prop="classify" align="center" label="分类" />
                <el-table-column prop="titleName" align="center" label="标题" />
                <el-table-column prop="createTime" align="center" label="创建时间" />
                <el-table-column prop="publisher" align="center" label="发布人" />
                <el-table-column prop="origin" align="center" label="来源" />
                <el-table-column align="center" label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button type="text" @click="showCreateDialog(scope.row)">审批</el-button>
                    <el-button type="text" @click="queryById(scope.row.healthyDataPublishUid)">查看</el-button>
                    <el-button type="text" @click="getRecords(scope.row)" style="color: #f00;">审批记录</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <XPagination ref="pageInfo" :total="total" :get-data="getList" />
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="审批" :visible.sync="dialogVisible">
      <el-form label-width="150px" ref="form" :model="form" :rules="formRules">
        <el-form-item label="审批：" prop="approvalStatus">
          <el-radio-group v-model="form.approvalStatus">
            <el-radio :label="'通过'">审批通过</el-radio>
            <el-radio :label="'驳回'">审批不通过</el-radio>
            <el-radio :label="'专家待确认'" v-if="userInfo.roleName === '运营人员'">转专家</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.approvalStatus === '驳回'" label="审批不通过原因：" prop="remarks">
          <el-input :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" v-model="form.remarks" />
        </el-form-item>
        <el-form-item v-if="form.approvalStatus === '专家待确认'" label="专家名称：" prop="approvalPro">
          <el-input v-model="form.approvalPro" readonly clearable>
            <i slot="suffix" class="el-input__icon el-icon-search" @click="expertDialog = true;"></i>
          </el-input>
        </el-form-item>
        <el-form-item v-if="form.approvalStatus === '专家待确认'" label="审批原因：" prop="remarks">
          <el-input :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" v-model="form.remarks" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
    <!--  -->
    <el-dialog title="审批" :visible.sync="batchDialog">
      <el-form label-width="150px" ref="form" :model="batchForm" :rules="formRules">
        <el-form-item label="审批：" prop="approvalStatus">
          <el-radio-group v-model="batchForm.approvalStatus">
            <el-radio :label="'通过'">审批通过</el-radio>
            <el-radio :label="'驳回'">审批不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="batchForm.approvalStatus === '驳回'" label="审批不通过原因：" prop="remarks">
          <el-input :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" v-model="batchForm.remarks" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="batchSave">保存</el-button>
      </template>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="detailsDialog">
      <el-form label-width="120px" :model="detailsForm">
        <el-form-item label="分类" prop="classify">
          <div>{{ detailsForm.classify }}</div>
        </el-form-item>
        <el-form-item label="标题" prop="titleName">
          <div>{{ detailsForm.titleName }}</div>
        </el-form-item>
        <el-form-item label="关键字" prop="keyWork">
          <div>{{ detailsForm.keyWork }}</div>
        </el-form-item>
        <el-form-item label="封面" prop="coverFileName">
          <el-image style="width: 100px;height: 100px;" :src="detailsForm.coverFileName"></el-image>
        </el-form-item>
        <el-form-item label="内容" prop="contents">
          <div id="real-editor-container"></div>
        </el-form-item>
        <el-form-item label="发布人" prop="publisher">
          <div>{{ detailsForm.publisher }}</div>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <div>{{ detailsForm.author }}</div>
        </el-form-item>
        <el-form-item label="来源" prop="origin">
          <div>{{ detailsForm.origin }}</div>
        </el-form-item>
        <el-form-item label="位置" prop="positions">
          <el-checkbox-group :value="detailsForm.positions">
            <el-checkbox label="首页" name="positions"></el-checkbox>
            <el-checkbox label="栏目首页" name="positions"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="发布时间" prop="releaseTime">
          <div>{{ detailsForm.releaseTime }}</div>
        </el-form-item>
        <el-form-item label="是否栏目推荐" prop="columnRecommendation">
          <el-radio-group :value="detailsForm.columnRecommendation">
            <el-radio label="否"></el-radio>
            <el-radio label="是"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否开启评论" prop="enableComments">
          <el-radio-group :value="detailsForm.enableComments">
            <el-radio label="否"></el-radio>
            <el-radio label="是"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="realDialog = false">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog title="审批记录" :visible.sync="recordsDialog">
      <el-table :data="recordsData" :stripe="true" style="width: 100%">
        <el-table-column prop="approvalLevel" align="center" label="层级" />
        <el-table-column prop="titleName" align="center" label="名称" />
        <el-table-column prop="approvalPro" align="center" label="审批人员" />
        <el-table-column prop="approvalTime" align="center" label="审批时间" />
        <el-table-column prop="remarks" align="center" label="备注" />
      </el-table>
      <template slot="footer">
        <el-button type="primary" @click="recordsDialog = false">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog title="选择专家" :visible.sync="expertDialog" width="80%">
      <expertList @getName="getName" v-if="expertDialog"></expertList>
      <template slot="footer">
        <el-button type="primary" @click="expertDialog = false">关闭</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import XPagination from "../../components/xpagination/XPagination";
import expertList from "../../components/expertList.vue";
import * as ToBeReviewed from "../../api/ToBeReviewed"
import * as formUtils from "../../utils/formUtils";
export default {
  name: "list",
  components: { XPagination, expertList },
  data () {
    return {
      searchForm: {
        status: 1,
      },
      tableData: [],
      loading: false,
      dialogVisible: false,
      detailsDialog: false,
      recordsDialog: false,
      expertDialog: false,
      total: 0,
      dialogTitle: "添加角色",
      form: {
      },
      formRules: {
        approvalStatus: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        remarks: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        approvalPro: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        approvalContent: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ]
      },
      detailsForm: {},
      recordsData: [],
      selectionData: [],
      batchDialog: false,
      batchForm: {},
      expertForm: {},
      userInfo: {}
    }
  },
  methods: {
    getList (pageInfo) {
      const param = {
        ...this.searchForm,
        ...pageInfo
      }
      ToBeReviewed.queryByPage(param).then(response => {
        console.log(response)
        this.tableData = response.data.data.rows
        this.total = response.data.data.total
        this.loading = false
      }).catch(error => {
        console.log(error)
      })
    },
    handleDelete (index, data) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          uid: data.uid,
        }
        this.loading = true
        ToBeReviewed.deleteById(param).then(result => {
          this.loading = false
          this.$message.success(result.data.msg)
          this.handleSearch()
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      }).catch(() => {
        console.log('取消删除')
      });
    },
    handleSearch () {
      this.$refs.pageInfo.loadData()
    },
    showCreateDialog (row) {
      this.expertForm = row
      delete this.expertForm.createTime
      delete this.expertForm.updateTime
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.form.uid = row.uid
      })
    },
    handleSave () {
      this.handleEdit()
    },
    handleAdd () {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false
        }
        const param = Object.assign({}, this.form)
        formUtils.filterFormFields(param)
        ToBeReviewed.insert(param).then(result => {
          this.$message.success(result.data.msg)
          this.dialogVisible = false
          this.handleSearch()
        }).catch(error => {
          this.$message.error(error)
          console.log(error)
        })

      })
    },
    handleEdit () {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false
        }
        const param = Object.assign({}, this.form)
        formUtils.filterFormFields(param)
        if (this.form.approvalStatus !== '专家待确认') {
          ToBeReviewed.update(param).then(result => {
            this.$message.success('确认完成')
            this.dialogVisible = false
            this.handleSearch()
          }).catch(error => {
            this.$message.error(error)
            console.log(error)
          })
        } else {
          this.expertForm.approvalPro = param.approvalPro
          this.expertForm.approvalContent = param.approvalContent
          this.expertForm.approvalUid = param.approvalUid
          ToBeReviewed.insertRecord(this.expertForm).then(result => {
            this.$message.success('确认完成')
            this.dialogVisible = false
            this.handleSearch()
          }).catch(error => {
            this.$message.error(error)
            console.log(error)
          })
        }
      })
    },
    showEditDialog (index, data) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = Object.assign({}, data)
        this.dialogTitle = "编辑角色"
        this.editStatus = "edit"
      })
    },
    queryById (uid) {
      ToBeReviewed.queryById({ uid: uid }).then(result => {
        this.detailsForm = result.data.data
        document.getElementById('real-editor-container').innerHTML = this.detailsForm.contents
        let video = document.getElementsByTagName('video')
        for (var i = 0; i < video.length; i++) {
          video[i].parentElement.style.display = 'flex'
          video[i].parentElement.style.justifyContent = 'center'
        }
      }).catch(error => {
        console.log(error)
      })
      this.detailsDialog = true
    },
    getRecords (row) {
      this.recordsDialog = true
      const param = {
        healthyDataPublishUid: row.healthyDataPublishUid
      }
      ToBeReviewed.queryByPage(param).then(response => {
        this.recordsData = response.data.data.rows
      }).catch(error => {
        console.log(error)
      })
    },
    selectionChange (data) {
      this.selectionData = data
    },
    batchApproval () {
      if (this.selectionData.length < 1) {
        this.$message.error('请勾选批量操作的数据')
        return false
      }
      this.batchForm = {}
      this.batchDialog = true
    },
    batchSave () {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false
        }
        const param = Object.assign({}, this.batchForm)
        param.uids = []
        this.selectionData.forEach(item => {
          param.uids.push(item.uid)
        })

        ToBeReviewed.batchUpdate(param).then(result => {
          this.$message.success('确认完成')
          this.batchDialog = false
          this.handleSearch()
        }).catch(error => {
          this.$message.error(error)
          console.log(error)
        })
      })
    },
    getName (msg) {
      if (this.dialogVisible) {
        this.form.approvalPro = msg.name
        this.form.approvalUid = msg.uid
      } else if (this.batchDialog) {
        this.batchForm.approvalPro = msg.name
        this.batchForm.approvalUid = msg.uid
      }
      this.expertDialog = false
    }
  },
  mounted () {
    this.userInfo = JSON.parse(localStorage.getItem('user_info'))
    this.searchForm.approvalUid = localStorage.getItem('loginUid')
    this.handleSearch()
  }
}
</script>

<style scoped lang="scss"></style>
